import React, { Component } from 'react'
import Home from './zixun/home'
import Add from './zixun/add'
import { Switch, Route, Redirect } from 'react-router-dom'
// 引入上下文
import CTX from "./zixun/ctx"
export default class App extends Component {
  state = {
    //selected 是否完成 true为完成 false为未完成
    //del 是否删除  true已删除   false未删除  
    consultList: [
      //未完成  未删除
      { id: 1, title: "消费维权", time: '2024-9-15 09:52:00', ctime: "9:00-10:00", consultnr: "商城购买语法有问题，不给退换", selected: false, del: false },
      //已完成  未删除
      { id: 2, title: "财产纠纷", time: '2024-9-15 09:52:00', ctime: "9:00-10:00", consultnr: "财产纠纷内容", selected: true, del: false },
      //已完成  已删除
      { id: 3, title: "合同纠纷", time: '2024-9-15 09:52:00', ctime: "9:00-10:00", consultnr: "合同纠纷内容", selected: true, del: true }
    ]
  }

    // 改变多选框的状态
  changeSelected=(id)=>{
    let newlist=[...this.state.consultList]
    newlist.filter(v=>{
      if(v.id==id){
        return v.selected=!v.selected
      }
    })
    this.setState({consultList:newlist})
  }

  // 删除放到回收站
  huidel=(id)=>{
    let newlist=[...this.state.consultList]
    newlist.forEach(v=>{
      if(v.id==id){
        return v.del=true
      }
    })
    this.setState({consultList:newlist})
  }

  // 添加
  add=(obj)=>{
    this.setState({consultList:[obj,...this.state.consultList]})
  }

  render() {
    let {consultList}=this.state
    return (
      <CTX.Provider value={{
        consultList:consultList,
        changeSelected:this.changeSelected,
        huidel:this.huidel,
        add:this.add
      }}>
        <div>
          <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/add" component={Add}></Route>
            <Redirect from="/" to="/home"></Redirect>
          </Switch>
        </div>
      </CTX.Provider>
    )
  }
}
